<template>
	<view class="list">
		<view class="item" v-for="item in list" @click="$navTo('/pages/taobao/detail?id='+item.product_id+'&type='+type)">
			<view class="logo">
				<image :src="item.thumb" v-if="type==1"></image>
				<image :src="item.cover" v-if="type==2"></image>
			</view>
			<view class="content">
				<view class="title">
					<view class="tag tag_red" v-if="type==1">拼多多</view>
					<view class="tag tag_black" v-if="type==2">抖音</view>
					<text>{{item.title}}</text>
				</view>
				<view class="info">
					<view class="price">
						<text class="new"><text>￥</text>{{item.realprice}}</text>
						<text class="old">￥{{item.realprice}}</text>
					</view>
					<view>{{item.sales}}人已购</view>
				</view>
				<text class="tip" v-if="type==1&&item.cos_fee>=0">返现 ￥{{item.cos_fee}}</text>
				<text class="tip" v-if="type==2&&item.cosFee>=0">返现 ￥{{item.cosFee}}</text>
				<view class="shop">{{item.shopName}}</view>
			</view>
		</view>
		<view class="empty_loading">
			<image v-show="isloading" src="/static/business/loading.gif" mode=""></image>
			<text v-show="isempty">没有更多了~</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"taobaoList",
		props: {
			'list': {
				type: Array,
				default: []
			},
			'type':{
				type: Number,
				default: 1
			},
			'isloading':{
				type: Boolean,
				default: false
			},
			'isempty':{
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
			};
		},
	}
</script>

<style lang="scss">
.list{
	padding: 0 20rpx;
	.item{
		display: flex;
		justify-content: space-between;
		background: #fff;
		padding: 15rpx;
		margin-bottom: 15rpx;
		.logo{
			width: 220rpx;
			height: 220rpx;
			border-radius: 8rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content{
			flex: 1;
			padding-left: 15rpx;
			.title{
				font-weight: bold;
				line-height: 1.5;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				position: relative;
				text{
					word-wrap: break-all;
					white-space: pre-line;
					padding-left: 64rpx;
				}
				.tag{
					border-radius: 5rpx;
					color: #fff;
					font-size: 18rpx;
					top: 4rpx;
					width: 56rpx;
					height: 34rpx;
					position: absolute;
					left: 0;
					text-align: center;
					line-height: 34rpx;
				}
				.tag_red{
					background: #f40009;
				}
				.tag_black{
					background: #141414;;
				}
			}
			.info{
				display: flex;
				justify-content: space-between;
				color: #a3a3c0;
				align-items: center;
				margin-top: 14rpx;
				font-size: 26rpx;
				.price{
					.new{
						font-weight: bold;
						font-size: 36rpx;
						margin-right: 16rpx;
						color: #000;
						text{
							font-size: 24rpx;
						}
					}
					.old{
						text-decoration: line-through;
						color: #bec4d4;
						font-size: 24rpx;
					}
				}
			}
			.tip{
				color: #ff3333;
				border: 1rpx solid #ffdcdc;
				font-size: 22rpx;
				border-radius: 4rpx;
				padding: 0 4rpx;
				margin-top: 5rpx;
			}
			.shop{
				color: #ccc4d4;
				margin-top: 6rpx;
			}
		}
	}
		
}

</style>